<template>
  <div class="container">
    <div>
      <div v-if="isPanYu" class="banner-container">
        <img src="../../assets/img/PanYuBranch.jpg">
        <span>番禺院区</span>
      </div>
      <div v-if="isYueXiu" class="banner-container">
        <img src="../../assets/img/YueXiuBranch.jpg">
        <span>越秀院区</span>
      </div>
      <div v-if="isHaiZhu" class="banner-container">
        <img src="../../assets/img/HaiZhuBranch.jpg">
        <span>海珠院区</span>
      </div>
    </div>
    <div class="weui_cells weui_cells_access">
      <a v-for="addr in addresses" @click="showTxMap($index)" class="weui_cell" href="javascript:;">
        <div class="weui_cell_hd">
          <i class="fa fa-map-marker fa-lg fa-fw" style="color:pink;width:20px;margin-right:5px;"></i>
        </div>
        <div class="weui_cell_bd weui_cell_primary">
          <p>{{addr.address}}</p>
        </div>
        <div class="weui_cell_ft">
        </div>
      </a>
      <a v-for="phone in phones" class="weui_cell" :href="'tel:' + phone.number">
        <div class="weui_cell_hd">
          <i class="fa fa-phone fa-lg fa-fw" style="color:pink;width:20px;margin-right:5px;"></i>
        </div>
        <div class="weui_cell_bd weui_cell_primary">
          <p>{{phone.number}}</p>
        </div>
        <div class="weui_cell_ft">
          {{phone.name}}
        </div>
      </a>
    </div>
    <div class="weui_panel weui_panel_access">
      <div class="weui_panel_hd">图文组合列表</div>
      <div class="weui_panel_bd">
        <a @click="$log('clicked')" href="javascript:;" class="weui_media_box weui_media_appmsg">
          <div class="weui_media_hd">
            <!-- <img class="weui_media_appmsg_thumb" src="../assets/img/icon_nav_button.png" alt=""> -->
            <i class="fa fa-group fa-2x" style="color:pink;"></i>
          </div>
          <div class="weui_media_bd">
            <h4 class="weui_media_title">标题一</h4>
            <p class="weui_media_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
          </div>
        </a>
        <a href="javascript:;" class="weui_media_box weui_media_appmsg">
          <div class="weui_media_hd">
            <i class="fa fa-group fa-2x" style="color:pink;"></i>
          </div>
          <div class="weui_media_bd">
            <h4 class="weui_media_title">标题二</h4>
            <p class="weui_media_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
          </div>
        </a>
      </div>
      <a class="weui_panel_ft" href="javascript:;">查看更多</a>
    </div>
    <div class="weui_panel weui_panel_access">
      <div class="weui_panel_hd">图文组合列表</div>
      <div class="weui_panel_bd">
        <a @click="$log('clicked')" href="javascript:;" class="weui_media_box weui_media_appmsg">
          <div class="weui_media_hd">
            <!-- <img class="weui_media_appmsg_thumb" src="../assets/img/icon_nav_button.png" alt=""> -->
            <i class="fa fa-user-md fa-2x" style="color:pink;"></i>
          </div>
          <div class="weui_media_bd">
            <h4 class="weui_media_title">标题一</h4>
            <p class="weui_media_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
          </div>
        </a>
        <a href="javascript:;" class="weui_media_box weui_media_appmsg">
          <div class="weui_media_hd">
            <i class="fa fa-user-md fa-2x" style="color:pink;"></i>
          </div>
          <div class="weui_media_bd">
            <h4 class="weui_media_title">标题二</h4>
            <p class="weui_media_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
          </div>
        </a>
      </div>
      <a class="weui_panel_ft" href="javascript:;">查看更多</a>
    </div>
  </div>
</template>
<style scoped>
.banner-container {
  position: relative;
  width: 100%;
  height: 156px;
}

.banner-container img {
  width: 100%;
  height: 100%;
}

.banner-container span {
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  height: 24px;
  background: rgba(0, 0, 0, 0.6);
  filter: progid: DXImageTransform.Microsoft.gradient( GradientType=0, startColorstr='#80000000', endColorstr='#80000000')\9;
  display: block;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-size: 12px;
  overflow: hidden;
  text-align: center;
  font-family: "Microsoft YaHei";
}
</style>
<script>
import { panYu } from '../json/branch-data'

export default {
  name: 'BranchDetailView',
  data: function () {
    return panYu
  },
  methods: {
    showTxMap: function (idx) {
      var addr = this.addresses[idx]
      var mapUrl = 'http://map.qq.com/m/place/info/pointx=' + addr.mapLng + '&pointy=' + addr.mapLat + '&level=16&word=' + addr.mapTitle + '&addr=' + addr.mapAddress + '?referer=tengxun&ch=wap-map1.0'
      window.location.href = mapUrl
    }
  },
  ready: function () {}
}
</script>
